<template>
  <div class="imei-op-c">
    <div class="header" :class="[mobile ? 'mobile' : '']">
      <div class="button-list" :class="[mobile ? 'mobile' : '']">

        <el-button icon="el-icon-upload2" :size="mobile ? 'mini' : ''" class="button-imei-op" @click="showImportImei">{{
          $t("导入") }}</el-button>
        <el-button icon="el-icon-download" :size="mobile ? 'mini' : ''" :title="$t('导出最近提交订单')" class="button-imei-op"
          @click="showExport">{{
            $t("导出") }}</el-button>
        <el-button icon="el-icon-delete" :size="mobile ? 'mini' : ''" class="button-imei-op" @click="clearImeis">{{
          $t("清空") }}</el-button>
        <el-button icon="el-icon-refresh" :size="mobile ? 'mini' : ''" class="button-imei-op"
          @click="refreshOrderImei">{{
            $t("刷新订单") }}</el-button>
        <template>
          <el-button icon="el-icon-upload" :size="mobile ? 'mini' : ''" class="button-imei-op" @click="commitImeis"
            v-if="!pause">{{ $t("开始提交")
            }}</el-button>
          <el-button icon="el-icon-upload" :size="mobile ? 'mini' : ''" class="button-imei-op"
            @click="$emit('cancleCommit')" v-else>{{ $t("暂停提交")
            }}</el-button>
        </template>
        <el-button icon="el-icon-upload" :size="mobile ? 'mini' : ''" class="button-imei-op" @click="resetFailedImei">{{
          $t("重置失败") }}</el-button>
        <el-button :icon="!$store.state.star.includes(serviceId) ? 'el-icon-star-off' : 'el-icon-star-on'"
          :size="mobile ? 'mini' : ''" class="button-imei-op" @click="$store.dispatch('getStar', serviceId)"
          v-if="serviceId">{{
            !$store.state.star.includes(serviceId) ? '收藏服务' : '取消收藏' }}</el-button>
      </div>
      <div class="to" v-if="!mobile">
        <el-button type="danger" icon="el-icon-s-home" @click="$router.push('/home')">{{ $t("返回主页") }}</el-button>
        <el-button type="success" icon="el-icon-s-custom" @click="$router.push('/contact')">{{ $t("联系客服") }}</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { isMobile } from "@/utils";

export default {
  name: "BatchQueryToolHeader",

  props: {
    pause: {
      type: Boolean,
      default() {
        return true;
      },
    },
    serviceId: {
      type: String,
      default: ''
    }
  },

  watch: {},
  computed: {
    mobile() {
      return isMobile();
    },
  },
  data() {
    return {
      isPhone: false,
    };
  },

  mounted() {
    this.isPhone = this.isPhonem();
  },

  methods: {
    isPhonem() {
      return isMobile();
    },
    refreshOrderImei() {
      this.$emit("refreshOrderImei");
    },
    showImportImei() {
      this.$emit("showImportImei");
    },
    showExport() {
      this.$emit("showExport");
    },
    commitImeis() {
      this.$emit("commitImeis");
    },
    cancleCommit() {
      this.$emit("cancleCommit");
    },
    resetFailedImei() {
      this.$emit("resetFailedImei");
    },
    clearImeis() {
      this.$emit("clearImeis");
    },
  },
};
</script>

<style lang="scss" scoped>
.imei-op-c {
  width: 100%;
  display: flex;
  flex-direction: column;

  .header {
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    position: relative;
    flex-shrink: 0;

    &.mobile {
      height: auto;
      padding-bottom: 0;
      border-bottom-color: transparent;
    }

    .to {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }


  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;

  .t {
    padding-left: 20px;
  }
}

.e {
  width: 10px;
  height: 10px;
  position: relative;

  &:after {
    content: "";
    border-top: 10px solid transparent;
    border-left: 10px solid #fff;
    border-right: 10px solid transparent;
    position: absolute;
    left: -10px;
    top: -2px;
    transform: rotate(-135deg);
  }
}

.s {
  width: 10px;
  height: 10px;
  position: relative;

  &:after {
    content: "";
    width: 3px;
    height: 10px;
    width: 3px;
    background-color: #fff;
    position: absolute;
    left: 0px;
    top: 3px;
  }

  &:before {
    content: "";
    width: 3px;
    height: 10px;
    width: 3px;
    background-color: #fff;
    position: absolute;
    left: 6px;
    top: 3px;
  }
}

.button-list {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  flex-wrap: wrap;

  &.mobile {
    justify-content: flex-start;
    flex-wrap: wrap;

    button {
      margin-bottom: 10px !important;
    }
  }
}

.button-imei-op {
  margin: 0px 5px !important;
}
</style>
